<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*店铺详情文字*/
        .shopInfoP {
            line-height: 38px;
        }

        /*店铺详情图片*/
        .shopImg {
            width: 90px;
            height: 67.5px;
        }

        /*店铺详情按钮*/
        #shopInfoBtn {

            text-align: center;
        }

        /*审核意见*/
        .reviewed {
            width: 300px;
            margin: 20px auto auto;
        }

        /*审核意见 文本域*/
        #reviewedOpinionText {
            display: block;
            width: 300px;
            height: 100px;
            margin-top: 20px;
        }

        /*审核意见按钮*/
        #reviewedOpinionBtn {
            width: 50%;
            margin: 20px auto auto;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #009688;
        }

        #shopInfoForm img {
            border: 1px dashed;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-tab" id="shopTab" lay-filter="shopTab">
        <ul class="layui-tab-title">
            <li class="layui-this">待审核</li>
            <li>已拒绝</li>
            <li>已通过</li>
            <li>修改审核</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                    <input type="text" id="waitReviewedSearchName" placeholder="请输入店铺名称或联系人名称" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" id="waitReviewedSearch">搜索</button>
                </div>
                <table class="layui-hide" lay-filter="waitReviewedTable" id="waitReviewedTable"></table>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                    <input type="text" id="reviewedFailSearchName" placeholder="请输入店铺名称或联系人名称" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" id="reviewedFailSearch">搜索</button>
                </div>
                <table class="layui-hide" lay-filter="reviewedFailTable" id="reviewedFailTable"></table>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                    <input type="text" id="reviewedAdoptSearchName" placeholder="请输入店铺名称或联系人名称" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" id="reviewedAdoptSearch">搜索</button>
                </div>
                <table class="layui-hide" lay-filter="reviewedAdoptTable" id="reviewedAdoptTable"></table>
            </div>
            <div class="layui-tab-item">
                <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                    <input type="text" id="updateShopAuditSearchName" placeholder="请输入店铺名称或联系人名称" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" id="updateShopAuditSearch">搜索</button>
                </div>
                <table class="layui-hide" lay-filter="updateShopAuditTable" id="updateShopAuditTable"></table>
            </div>
        </div>
    </div>
</body>

<!--待审核-->
<script type="text/html" id="waitReviewedEdit">
    <a class="layui-btn layui-btn-xs" lay-event="reviewedBtn">审核</a>
</script>
<!--审核失败-->
<script type="text/html" id="reviewedFailEdit">
    <a class="layui-btn layui-btn-xs" lay-event="showBtn">查看</a>
</script>
<!--审核通过-->
<script type="text/html" id="reviewedAdoptEdit">
    <a class="layui-btn layui-btn-xs" lay-event="showBtn">查看</a>
</script>

<!--店铺入住详情页面-->
<script type="text/html" id="shopInfo">
    <form class="layui-form" style="padding: 20px" id="shopInfoForm">
        <div class="layui-form-item">
            <label class="layui-form-label">营业执照:</label>
            <div class="layui-input-block">
                <img id="businesslicenseMapping" src="/images/char-ccmiao.png" class="shopImg">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实体店门店图:</label>
            <div class="layui-input-block">
                <img id="shopPicture" src="/images/char-ccmiao.png" class="shopImg">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">施工车间全景:</label>
            <div class="layui-input-block">
                <img id="constructionworkshopMapping" src="/images/char-ccmiao.png" class="shopImg">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">技师施工图:</label>
            <div class="layui-input-block">
                <img id="technicianconstructionMapping" src="/images/char-ccmiao.png" class="shopImg">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实体店名称:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="shopName">南昌汽车汽修店</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实体店类型:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="shopTypeName">洗车</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人姓名:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="contactsName">吴恩生</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="phone">13064115080</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备用手机:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="sparePhone">17370840807</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址:</label>
            <div class="layui-input-block">
                <p class="shopInfoP" id="address">江西南昌西湖区广丰大厦164号</p>
            </div>
        </div>
        <div class="layui-form-item" id="shopInfoBtn" hidden="hidden">
            <button type="button" class="layui-btn layui-btn-normal" id="auditBtn">通过</button>
            <button type="button" class="layui-btn layui-btn-danger" id="failBtn">拒绝</button>
        </div>

    </form>
</script>

<script type="text/html" id="reviewedOpinion">
    <div class="reviewed">
        <p>请输入审核意见:</p>
        <textarea id="reviewedOpinionText"></textarea>
        <div id="reviewedOpinionBtn">
            <button type="button" class="layui-btn layui-btn-primary" id="reviewedOpinionCancelBtn">取消</button>
            <button type="button" class="layui-btn layui-btn-normal" id="reviewedOpinionConfirmBtn">确认</button>
        </div>

    </div>
</script>

<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.use(['element', 'table', 'jquery'], function () {
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        //店铺详情的弹出窗口
        var shopInfoWindows;
        //审核意见的弹窗
        var reviewedOpinionWindwos;

        var index2 = false;
        var index3 = false;
        //待审核的
        table.render({
            elem: '#waitReviewedTable'
            , url: '/shopReviewed/getWaitReviewed/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                , {field: 'phone', title: '手机号码', align: 'center'}
                , {field: 'createDate', title: '创建日期', align: 'center'}
                , {field: 'edit', title: '操作', align: 'center', toolbar: '#waitReviewedEdit'}
            ]]
            , page: true
        });
        //已拒绝
        table.render({
            elem: '#reviewedFailTable'
            , url: '/shopReviewed/getReviewedFail/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                , {
                    field: 'reviewedOpinion',
                    title: '拒绝原因',
                    align: 'center',
                    templet: '<div>{{d.props.reviewedOpinion ? d.props.reviewedOpinion : ""}}</div>'
                }
                , {field: 'createDate', title: '创建日期', align: 'center'}
                , {field: 'edit', title: '操作', align: 'center', toolbar: '#reviewedFailEdit'}
            ]]
            , page: true
        });
        //已通过
        table.render({
            elem: '#reviewedAdoptTable'
            , url: '/shopReviewed/getReviewedAudit/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                , {
                    field: 'reviewedOpinion',
                    title: '通过原因',
                    align: 'center',
                    templet: '<div>{{d.props.reviewedOpinion ? d.props.reviewedOpinion : ""}}</div>'
                }
                , {field: 'createDate', title: '创建日期', align: 'center'}
                , {field: 'edit', title: '操作', align: 'center', toolbar: '#reviewedAdoptEdit'}
            ]]
            , page: true
        });

        //
        table.render({
            elem: '#updateShopAuditTable'
            , url: '/shopReviewed/getUpdateShopAudit/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                , {field: 'phone', title: '手机号码', align: 'center'}
                , {field: 'createDate', title: '创建日期', align: 'center', sort: true}
                , {field: 'edit', title: '操作', align: 'center', toolbar: '#waitReviewedEdit'}
            ]]
            , page: true
        });

        //修改审核的查看审核
        table.on('tool(updateShopAuditTable)', function (obj) {
            if (obj.event === 'reviewedBtn') {
                obj.data.isUpdate = true
                showShopInfo(obj.data, true);
            }
        })

        //待审核的查看审核
        table.on('tool(waitReviewedTable)', function (obj) {
            if (obj.event === 'reviewedBtn') {
                showShopInfo(obj.data, true);
            }
        })
        //审核失败的查看审核
        table.on('tool(reviewedFailTable)', function (obj) {
            if (obj.event === 'showBtn') {
                showShopInfo(obj.data, false);
            }
        })
        //审核成功的查看审核
        table.on('tool(reviewedAdoptTable)', function (obj) {
            if (obj.event === 'showBtn') {
                showShopInfo(obj.data, false);
            }
        })

        // 打开店铺入住详情
        //data 是店铺信息
        //flag 是查看 还是审核  查看没有通过拒绝按钮 true 审核 false 查看
        function showShopInfo(data, flag) {
            shopInfoWindows = layer.open({
                type: 1,
                area: ['400px', '500px'],
                title: '店铺入驻详情',
                content: $('#shopInfo').html(),
                success: function () {
                    //图片方法预览
                    $('.shopImg').click(function (obj) {
                        var img = new Image();
                        img.src = obj.target.src;
                        var height = img.height + 50; //获取图片高度
                        var width = img.width; //获取图片宽度
                        var imgHtml = "<img src='" + obj.target.src + "' />";
                        layer.open({
                            type: 1,
                            shade: 0.8,
                            offset: 'auto',
                            area: [width + 'px', height + 'px'],
                            shadeClose: true,//点击外围关闭弹窗
                            scrollbar: false,//不现实滚动条
                            title: "图片预览", //不显示标题
                            content: imgHtml
                        })
                    })
                    //如果为true  显示按钮
                    if (flag) {
                        $('#shopInfoBtn').show();
                        //拒绝按钮
                        $('#failBtn').on('click', function () {
                            if(data.isUpdate){
                                //修改审核走这
                                $.ajax({
                                    url: '/shopReviewed/reviewedUpdate',
                                    method: 'POST',
                                    async: false,
                                    data: {
                                        shopId:data.shopId,
                                        status: false
                                    },
                                    success: function (res) {
                                        layer.closeAll();
                                        if (res.code == 200) {
                                            layer.msg(res.msg, {icon: 1});
                                            table.reload('updateShopAuditTable')
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    }
                                })
                                layer.close(shopInfoWindows);
                                return
                            }
                            reviewedBtnMethod(data.shopId, false)
                        })
                        //通过按钮
                        $('#auditBtn').on('click', function () {
                            if(data.isUpdate){
                                $.ajax({
                                    url: '/shopReviewed/reviewedUpdate',
                                    method: 'POST',
                                    async: false,
                                    data: {
                                        shopId:data.shopId,
                                        status: true
                                    },
                                    success: function (res) {
                                        layer.closeAll();
                                        if (res.code == 200) {
                                            layer.msg(res.msg, {icon: 1});
                                            table.reload('updateShopAuditTable')
                                        } else {
                                            layer.msg(res.msg, {icon: 2});
                                        }
                                    }
                                })
                                return
                            }
                            reviewedBtnMethod(data.shopId, true)
                        })
                    }
                    //赋值
                    $('#shopName').text(data.shopName);
                    $('#shopTypeName').text(data.shopTypeName);
                    $('#contactsName').text(data.contactsName);
                    $('#phone').text(data.phone);
                    $('#sparePhone').text(data.sparePhone);
                    $('#address').text(data.address);
                    $('#technicianconstructionMapping').attr('src', data.props.technicianconstructionMapping)
                    $('#constructionworkshopMapping').attr('src', data.props.constructionworkshopMapping)
                    $('#businesslicenseMapping').attr('src', data.props.businesslicenseMapping)
                    $('#shopPicture').attr('src', data.shopPicture)
                }
            })
        }



        //点击通过或拒绝 的审核方法  显示输入审核意见框
        function reviewedBtnMethod(id, reviewedStatus) {
            console.log(id);
            console.log(reviewedStatus);
            reviewedOpinionWindwos = layer.open({
                type: 1,
                area: ['450px', '300px'],
                title: '审核意见',
                content: $('#reviewedOpinion').html(),
                success: function () {
                    //取消按钮
                    $('#reviewedOpinionCancelBtn').click(function () {
                        layer.close(reviewedOpinionWindwos);
                    })
                    $('#reviewedOpinionConfirmBtn').click(function () {
                        var reviewedOpinionText = $('#reviewedOpinionText').val();
                        //判断审核意见是否为空  通过可以为空
                        if (!reviewedStatus) {
                            if (reviewedOpinionText == undefined || reviewedOpinionText == '') {
                                layer.msg("拒绝通过需要输入拒绝原因", {icon: 2});
                                return
                            }
                        }
                        layer.load();
                        var json = {
                            shopId: id,
                            reviewedStatus: reviewedStatus,
                            reviewedOpinionText: reviewedOpinionText
                        }
                        $.ajax({
                            url: '/shopReviewed/reviewed',
                            method: 'POST',
                            data: json,
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('waitReviewedTable')
                                    if (reviewedStatus) {
                                        index3 = true;
                                    } else {
                                        index2 = true;
                                    }
                                    // table.reload('reviewedFailSearch')
                                    // table.reload('reviewedAdoptTable')
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        // layer.close(reviewedOpinionWindwos);
                    })
                }
            })
            // layer.close(shopInfoWindows);
        }

        //待审核的搜索
        $('#waitReviewedSearch').click(function () {
            var searchName = $('#waitReviewedSearchName').val();
            table.reload('waitReviewedTable', {where: {searchName: searchName}})
        })
        //审核失败的搜索
        $('#reviewedFailSearch').click(function () {
            var searchName = $('#reviewedFailSearchName').val();
            table.reload('reviewedFailTable', {where: {searchName: searchName}})
        })
        //审核成功的搜索
        $('#reviewedAdoptSearch').click(function () {
            var searchName = $('#reviewedAdoptSearchName').val();
            table.reload('reviewedAdoptTable', {where: {searchName: searchName}})
        })


        element.on('tab(shopTab)', function (data) {
            console.log(data)
            if (data.index == 0) {

            } else if (data.index == 1) {
                if (index2) {
                    table.reload('reviewedFailTable')
                    index2 = false;
                }
            } else if (data.index == 2) {
                if (index3) {
                    table.reload('reviewedAdoptTable')
                    index3 = false;
                }
            }
        });
    })
</script>
</html>
